<template>
	<!-- 分类 -->
	<div style="width: 100%;">
		<Header></Header>

		<!--  -->
		<div style="width: 1300px;margin: 0px auto;margin-top: 20px;">

			<!-- 类别 -->
			<div style="width: 230px;float: left;background:#f5f5f5;min-height: 550px;">
				<div class="leixing">
					<div class="lx">类型：</div>
					<div class="lx_item" @click="getGoods1()">全部</div>&nbsp;
					<div class="lx_item" style="width: 100px;height: 40px;padding-left: 20px;" plain v-for="types in categoryList" :key='types'
					 @click="showByType(types)">
						{{types.typename}}
					</div>
				</div>
				<div class="leixing">
					<div class="lx">价格：</div>
					<div class="lx_item" @click="showByPriceS()">价格升序</div> <br>
					<div class="lx_item" @click="showByPriceJ()">价格降序</div><br>
				</div>
			</div>

			<!-- 图书 -->
			<div style="width: 1030px;float: right;">

				<div v-for="(goods,index) in goodsList" :key="index" style="float: left;margin: 10px 32px;width: 220px;height: 360px;">
					<img :src="'http://localhost:8080/' + goods.imgs" style="width: 200px;height: 240px;" /><br /><br />
					<el-link type="danger" @click="getxiangqing(goods)">{{goods.goodsname}} &nbsp;&nbsp;&nbsp; {{goods.price}}(元)</el-link>&nbsp;

					<!-- <el-link type="info"> -->
					<el-icon color="#409EFC" class="no-inherit">
						<Share />
					</el-icon>
					<br>

				</div>
			</div>

		</div>
		<div style="clear: both; width: 100%;height: 50px"></div>
		<div style="width: 1471px;margin: 0px auto;"><img src="../../public/images/di.png" /></div>
		<div style="clear: both; width: 100%;height: 150px;background-color: ghostwhite;"></div>
	</div>
</template>

<script>
	import Axios from 'axios'
	import {
		ElMessage
	} from 'element-plus' //element-plus模块
	import router from "../route/index.js"
	import Header from './Header'
	export default {
		name: 'Fenlei',
		components: {
			Header
		},
		data() {
			return {
				goodsname: '',
				categoryList: [],
				goodsList: [],
				goodsLunbo: [],
				goods: {},
				show: false,
				list: [],
				showPingjia: false,
				pingjia: [],
				users: {},
				card: {}
			}
		},
		created() {
			this.getUsers();
			this.getGoodsType();
			this.getGoods();
		},

		methods: {
			getUsers() {
				// 获取sessionstorage中的用户信息
				let str = sessionStorage.getItem('users')
				if (str != null) {
					//把字符串转换成对象 --- sessionStorage存的必须时字符串，所以取出来的也是字符串
					this.users = JSON.parse(str);
				}
			},

			getxiangqing(goods) {
				// this.show = true;
				sessionStorage.setItem('g', JSON.stringify(goods));
				router.push('/ShowOne');

			},
			getGoodsType() { //获取商品类型

				Axios.post('/shopmng/api/type/selectAll').then(res => {
					this.categoryList = res.data;
				});

			},
			getGoods() {
				let id = window.location.href;

				let s = sessionStorage.getItem('bks');

				if (id.indexOf('/2') != -1) {
					Axios.post('/shopmng/api/books/selectAll').then(res => {
						this.goodsList = res.data;
					});
				} else {
					this.goodsList = JSON.parse(s);
				}
			},
			getGoods1() {

				Axios.post('/shopmng/api/books/selectAll').then(res => {
					this.goodsList = res.data;
				});

			},
			showByType(types) {
				Axios.post('/shopmng/api/books/selectType', {
					type: types.id
				}).then(res => {
					this.goodsList = res.data;
				});
			},
			showByPriceS() {
				Axios.post('/shopmng/api/books/selectPriceS').then(res => {
					this.goodsList = res.data;
					console.info(JSON.stringify(this.goodsList))
				});
			},
			showByPriceJ() {
				Axios.post('/shopmng/api/books/selectPriceJ').then(res => {
					this.goodsList = res.data;
				});
			}
		}
	}
</script>

<style>
	.leixing {
		margin-top: 20px;
		margin-left: 10px;
		clear: both;
		text-align: left;
	}

	.lunbo {
		margin-top: 30px;
	}

	.lx {
		font-size: 15px;
		padding-right: 20px;
		margin-bottom: 20px;
		text-align: left;
		color: orange;
		font-weight: 700;
	}

	.lx_item {
		font-size: 14px;
		padding: 0px 10px;
		cursor: pointer;

	}

	.lx_item:hover {
		color: orangered;
	}

	.el-carousel__item h3 {
		color: #475669;
		font-size: 18px;
		opacity: 0.75;
		line-height: 300px;
		margin: 0;
	}
</style>
